<template>
  <div class="timetable">
    <div class="campusManagementBox bx">

      <div class="campus br bx" v-if="!editorTimeTableFlag">
        <div class="campusManagement_title bx">
          <div class="campusManagement_title_left">课表信息</div>
          <div class="campusManagement_title_right">
            <div class="campusManagement_title_btn" @click="editorTimeTable">课表编辑</div>
            <!-- <div class="campusManagement_title_btn">模板下载</div>
            <div class="campusManagement_title_btn">导入课表</div> -->
          </div>
        </div>


      </div>
      <div class="campus br bx editorBox" v-if="editorTimeTableFlag">
        <div class="campusManagement_title bx">
          <div class="campusManagement_title_left">课表信息</div>
          <div class="campusManagement_title_right">
            <el-button type="primary" class="campusManagement_title_btn " :loading="editorSureFlag" @click="editorSure">完成</el-button>
            <el-button type="primary" class="campusManagement_title_btn " @click="resetSure">重置</el-button>
            <el-button type="primary" class="campusManagement_title_btn " @click="editorCancel">取消</el-button>

            <!-- <div class="campusManagement_title_btn">模板下载</div>
            <div class="campusManagement_title_btn">导入课表</div> -->
          </div>
        </div>
        <div class="campusManagement_weekName">
          <div class="weekName_subject">科目</div>
          <div class="weekName_title">课程时间</div>
          <div class="weekName_li" v-for="(item, index) in weekNameArr">周{{item}}</div>
        </div>
        <div class="commonBox_courseTableBox">

        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求
  export default {
    name: 'homework',
    data() {
      return {}
    },
    methods: {

      getData() { //获取数据

        // console.log(page + '_' + pagesize)
        let _this = this;
        let class_id = _this.class_id;



      },

    },

    components: {
      draggable,
    },
    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .timetable {
    width: 100%;
    height: 100%;
  }

  .campusManagementBox {
    width: 100%;
    height: 100%;
    /* padding-top: 98px; */
    position: relative;
  }

  .campus {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-top: 100px;
    position: relative;
  }

  .campusManagement_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .campusManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
  }

  .campusManagement_title_right {
    display: flex;
    align-items: center;
  }

  .campusManagement_weekName {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }

  .weekName_title {
    width: 10%;
  }

  .weekName_li {
    width: 18%;
  }

  .editorBox .weekName_title,
  .editorBox .weekName_li,
  .editorBox .weekName_subject {
    width: 11%;
  }

  .editorBox .commonBox_courseTable_left {
    width: 11%;
    overflow: auto;
    padding-bottom: 50px;
  }

  .editorBox .commonBox_courseTable_subject {
    width: 11%;
    overflow: auto;
    position: relative;
    padding-bottom: 50px;
  }

  .editorBox .commonBox_courseTable_subject_li {
    height: 16.67%;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .campusManagement_title_btn {
    font-size: 18px;
  }

  .editorBox .commonBox_courseTable_subject_li .bg {
    width: 80%;
    height: 80%;
    background: #4db3f8;
    border-radius: 4px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

  .editorBox .commonBox_courseTable_subject_li .bg.active {
    background: #2090ce;
  }

  .editorBox .commonBox_courseTable_left_li span {
    line-height: 60px;
    height: 60px;
    display: block;
  }

  .editorBox .commonBox_courseTable_right_li span {
    padding: 0 20px;
    position: relative;
    z-index: 10;
    line-height: 60px;
    height: 60px;
    display: block;

  }

  .editorBox .commonBox_courseTable_right_li span i.before {
    position: absolute;
    right: 10px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: url('../../../../static/images/delete.png') 23px 23px;
    opacity: 0.8;
    cursor: pointer;
    transition: transform 0.5s;
  }

  .editorBox .commonBox_courseTable_left {
    position: relative;
  }

  .editorBox .commonBox_courseTable_left_add {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: url('../../../../static/images/add.png');
  }

  .editorBox .commonBox_courseTable_left_add.up {
    top: 0;
  }

  .editorBox .commonBox_courseTable_left_add.down {
    bottom: 0;
  }

  .editorBox .commonBox_courseTable_right_li span i.before:hover {
    transform: scale(1.5)
  }

  .editorBox .commonBox_courseTable_right_li.nullStr span i.before {
    display: none;
  }

  .editorBox .commonBox_courseTable_right_li.nullStr {
    background: #c4c4c4;
  }

  .editorBox .commonBox_courseTable_right {
    width: 78%;
  }

  .commonBox_courseTableBox {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .commonBox_courseTable_left {
    width: 7.4%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* align-items: center; */
    align-content: flex-start;
  }

  .commonBox_courseTable_right {
    width: 92.6%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .commonBox_courseTable_left_li {

    /* height: 16.67%; */
    max-height: 60px;
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .commonBox_courseTable_right_li {

    width: 13.2%;
    margin-top: 10px;
    max-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4db3f8;
    border-radius: 4px;
    font-size: 28px;
    color: #fff;
    overflow: hidden;
  }

  .common_alertBox_li_right,
  .common_alertBox_li_left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .common_alertBox_footer {
    padding: 35px 275px 0;
  }

  .addLessonTime {
    width: 834px;
    height: 288px;
  }

  .common_alertBox_li_center {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .textarea {
    width: 650px;
    height: 138px;
    padding: 2px;
  }

  .title {
    align-items: center;
  }

  .addCourse {
    width: 833px;
    height: 438px;
  }

  .textarea textarea {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: 18px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
  }

</style>
